<template>
<div class="main-container" id="main-container">
    <div style="background-color: #fff;height:100%"  id="TestYarnRegistration"> 
        <div class="bg-container">
            <div class="my-header" style="margin-top: 20px;">
                <div class="search-form" v-if="headerShow">
                    <a-form size="small" :model="pageData" layout="inline">
                        <a-form-item label="流转卡号">
                            <a-input placeholder="流转卡号"  v-model="pageData.dropDownData" allow-clear />
                        </a-form-item>
                        <a-form-item label="建单日期">
                            <a-range-picker  popup-container="html"  v-model="pageData.createTimeArr" style="width: 300px;"/>
                        </a-form-item>
                        <a-form-item label="客户名称">
                            <a-input placeholder="客户名称"  v-model="pageData.dropDownData" allow-clear />
                        </a-form-item>
                        
                    </a-form>
                </div>
                <div class="my-divisders">
                    <a-divider orientation="center">
                        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                    </a-divider>
                </div>
                <div class="my-tool-bar">
                    <Toolbar :items="['查询','导出']"  @export="exports" @select="selectHandler">
                    </Toolbar>
                    
                </div>
            </div>
        </div>

    <div class="gang"></div>

    <div ref="tablediv" style="padding: 10px; box-sizing: border-box;height:100%">
        <a-tabs   :lazy-load="true" :justify="true" @change="tabsChange">
            <a-tab-pane title="缸卡信息" key="1"> 
                <a-table style="height: 100%;" size="small" :scrollbar="scrollbar" sticky-header @page-change="pagination.change" stripe
                    :bordered="true" :columns="tableColumns"
                    :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                    v-model:selected-keys="selectedRowKeys" :loading="table.tableLoading" :data="table.dataList"
                    :pagination="{ size: 'small', current: pagination.page, pageSize: pagination.pageSize, total: pagination.total }"
                    :rowKey="rowKey">
                </a-table>
            </a-tab-pane>
            <a-tab-pane title="缸卡明细信息" key="2">
                <a-table style="height: 100%;" size="small" :scrollbar="scrollbar" sticky-header @page-change="pagination.change" stripe
                    :bordered="true" :columns="tableColumnsDet"
                    :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                    v-model:selected-keys="selectedRowKeys" :loading="table.tableLoading" :data="table.dataList"
                    :pagination="{ size: 'small', current: pagination.page, pageSize: pagination.pageSize, total: pagination.total }"
                    :rowKey="rowKey">
                </a-table>
            </a-tab-pane>
        </a-tabs>
        
    </div>

    </div>
</div>
    
</template>

<script lang="ts">
import { post, get } from "@/api/http";
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";

import { ref, reactive, onMounted, onActivated, onUnmounted } from "vue";
import Toolbar from "@/components/Toolbar.vue";
import { Form, Message, Modal, Pagination } from "@arco-design/web-vue";
import { FormInstance } from "@arco-design/web-vue/es/form";
import emitter from "@/hooks/useEventBus";
import validate from "@/hooks/useValidate";
import { baseURL } from '../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'

export default {
    // 流转卡调整列表
    name: "AdjustmentOfCirculationCard",
    setup() {
        //隐藏显示头部
        const headerShow = ref<boolean>(true)
        //滚动参数
        const scrollbar = ref(true)
        //查询列表
        onMounted(() => {
            selectHandler()
        });
        //切换tab标签
        const tabsChange = (e:string|number)=>{
           pageData.tableIndex = e as string
           selectHandler()  
       };
        function doRefresh() {

            pageData.pageLoading = true
            if(pageData.tableIndex === '1'){
                post({
                    url: "pdm/ClothSet/selectPage",
                    data: {
                        page: pagination.page,
                        size: pagination.pageSize,
                        deleteState: 0,
                        mercery: pageData.dropDownData,
                        createTimeStart: pageData.createTimeArr[0],
                        createTimeEnd: pageData.createTimeArr[1]
                    },
                })
                    .then(({ data, code }: any) => {
                        if (code === 200) {

                            table.handleSuccess(data.list);
                            pagination.setTotalSize(data.total);

                        }
                    })
                    .catch(console.log).finally(() => {
                        pageData.pageLoading = false
                    })
            } else {
                post({
                    url: "pdm/ClothSet/selectPage",
                    data: {
                        page: pagination.page,
                        size: pagination.pageSize,
                        deleteState: 0,
                        mercery: pageData.dropDownData,
                        createTimeStart: pageData.createTimeArr[0],
                        createTimeEnd: pageData.createTimeArr[1]
                    },
                })
                    .then(({ data, code }: any) => {
                        if (code === 200) {

                            table.handleSuccess(data.list);
                            pagination.setTotalSize(data.total);

                        }
                    })
                    .catch(console.log).finally(() => {
                        pageData.pageLoading = false
                    })
            }
            
        }
        //-----显示列表开始-----
        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        //检验表单是否含有中文的方法
        const hasChiese = validate.includeChinese;
        const tableColumns = useTableColumn([
            {
                title: "流转卡号",
                key: "mercery",
                dataIndex: "mercery",
                width: 100
            },
            {
                title: "开单日期",
                key: "mercery1",
                dataIndex: "mercery1",
                width: 100
            },
            {
                title: "设备编号",
                key: "mercery2",
                dataIndex: "mercery2",
                width: 100
            },
            {
                title: "客户名称",
                key: "mercery3",
                dataIndex: "mercery3",
                width: 100
            },
            {
                title: "计划单号",
                key: "mercery4",
                dataIndex: "mercery4",
                width: 100
            },
            {
                title: "合约号",
                key: "mercery5",
                dataIndex: "mercery5",
                width: 100
            },
            {
                title: "加工类型",
                key: "mercery6",
                dataIndex: "mercery6",
                width: 100
            },
            {
                title: "作业类型",
                key: "mercery7",
                dataIndex: "mercery7",
                width: 100
            },
            {
                title: "等待工序",
                key: "mercery8",
                dataIndex: "mercery8",
                width: 100
            },
            {
                title: "客户订单号",
                key: "mercery9",
                dataIndex: "mercery9",
                width: 100
            },
            {
                title: "色号",
                key: "mercery10",
                dataIndex: "mercery10",
                width: 100
            },
            {
                title: "色称",
                key: "mercery11",
                dataIndex: "mercery11",
                width: 100
            },
            {
                title: "纱批",
                key: "mercery12",
                dataIndex: "mercery12",
                width: 100
            },
            {
                title: "审核人",
                key: "mercery13",
                dataIndex: "mercery13",
                width: 100
            },
            {
                title: "审核时间",
                key: "mercery14",
                dataIndex: "mercery14",
                width: 100
            },

            {
                title: "修改人",
                key: "mercery15",
                dataIndex: "mercery15",
                width: 100
            }
        ]);
        const tableColumnsDet = useTableColumn([
            {
                title: "客户名称",
                key: "mercery",
                dataIndex: "mercery",
                width: 100
            },
            {
                title: "流转卡号",
                key: "mercery1",
                dataIndex: "mercery1",
                width: 100
            },
            {
                title: "生产车间",
                key: "mercery2",
                dataIndex: "mercery2",
                width: 100
            },
            {
                title: "开卡日期",
                key: "mercery3",
                dataIndex: "mercery3",
                width: 100
            },
            {
                title: "客户名称",
                key: "mercery4",
                dataIndex: "mercery4",
                width: 100
            },
            {
                title: "计划单号",
                key: "mercery5",
                dataIndex: "mercery5",
                width: 100
            },
            {
                title: "匹数",
                key: "mercery5",
                dataIndex: "mercery5",
                width: 100
            },
            {
                title: "重量",
                key: "mercery5",
                dataIndex: "mercery5",
                width: 100
            },
            {
                title: "工段",
                key: "mercery6",
                dataIndex: "mercery6",
                width: 100
            },
            {
                title: "工序",
                key: "mercery7",
                dataIndex: "mercery7",
                width: 100
            },
            {
                title: "色号",
                key: "mercery8",
                dataIndex: "mercery8",
                width: 100
            },
            {
                title: "色称",
                key: "mercery9",
                dataIndex: "mercery9",
                width: 100
            },
            {
                title: "纱批",
                key: "mercery10",
                dataIndex: "mercery10",
                width: 100
            },
            {
                title: "作业性质",
                key: "mercery11",
                dataIndex: "mercery11",
                width: 100
            },
            {
                title: "责任部门",
                key: "mercery12",
                dataIndex: "mercery12",
                width: 100
            },
            {
                title: "回修原因",
                key: "mercery13",
                dataIndex: "mercery13",
                width: 100
            },
            {
                title: "开始员工",
                key: "mercery14",
                dataIndex: "mercery14",
                width: 100
            },
            {
                title: "工序计划结束时间",
                key: "mercery16",
                dataIndex: "mercery16",
                width: 100
            },
            {
                title: "工序计划开始时间",
                key: "mercery16",
                dataIndex: "mercery16",
                width: 100
            },

            {
                title: "工序实际结束时间",
                key: "createName",
                dataIndex: "createName",
                width: 100
            },
            {
                title: "工序实际开始时间",
                key: "createTime",
                dataIndex: "createTime",
                width: 100
            }
        ]);
        const tablediv = ref(null)
        const pageData = reactive<{
            dropDownData: any
            pageLoading: boolean,
            theight: number,
            tablediv: any,
            rHeight: number | undefined,
            createTimeArr: any,
            tableIndex: string
        }>({
            dropDownData: "",
            pageLoading: false,
            theight: 0,
            tablediv: null,
            rHeight: 0,
            createTimeArr: [],
            tableIndex: '1'
        });
        //-----显示列表结束-----
        //查询
        const selectHandler = () => {
            pagination.page = 1
            doRefresh();
        }
        //导出
        const exports = () => {
            if (selectedRowKeys.value.length === 0) {
                Message.error('请先勾选')
                return
            } else {
                //将表头拼接出来
                let head = "<th>编号</th><th>名称</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return selectedRowKeys.value.indexOf(o["id"]) !== -1;
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + o["merceryCode"] + "</td>";
                    body += "<td>" + o["merceryName"] + "</td>";
                    body += "<td>" + o["remark"] + "</td>";
                    body += "<td>" + o["createName"] + "</td>";
                    body += "<td>" + o["createTime"] + "</td>";
                    body += "<td>" + o["updateName"] + "</td>";
                    body += "<td>" + o["updateTime"] + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '布类资料', body)
                console.log(table)
            }
        };
        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`;

            const a = document.createElement('a');
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
            a.download = filename;
            a.click();
            document.removeChild(a);
        };
        return {
            scrollbar,
            tablediv,
            hasChiese,
            selectedRowKeys,
            pagination,
            tableColumns,
            tableColumnsDet,
            table,
            rowKey,
            pageData,
            selectHandler,
            headerShow,
            tabsChange,
            exports
        };
    },
    components: { Toolbar },
};
</script>
<style scoped lang="less">
.main-container{
        height: 100%;
    }
</style>
